<style lang="less">
@import "../../styles/common.less";
</style>

<template>
  <div class="margin-top-10">
    <card>
      <p slot="title">logo配置</p>
      <ImageInput
        ref="logoInput"
        :compress="compress"
        style="margin: 5px"
        @changedImage="changedLogo"
      />
      <Row class="margin-top-20">
        <Button type="primary" @click="handleSave">保存</Button>
        <Button type="primary" @click="handleClean">清除</Button>
      </Row>
    </card>
    <card>
      <p slot="title">卡片提示过滤</p>
      <Form>
        <Table
          ref="selection"
          :columns="columnUsersShow"
          :data="usersShowData"
          width="320"
          @on-selection-change="selectChange"
        ></Table>
        <Row style="margin-top: 12px">
          <Button type="primary" @click="handleRecertUsersShow">还原</Button>
          <Button type="primary" @click="handleSaveUsersShow">保存</Button>
        </Row>
      </Form>
    </card>
  </div>
</template>

<script>
import Utils from "@/libs/util";
import { getTypeList } from "../../controllers/record";
import ME from "@/controllers/custom";
import DateUtils from "../../../node_modules/iview/src/utils/date";
import iconDelete from "../../images/delete.png";
import ImageInput from "src/components/image-input/image-input";
import Tooltip from "../../../node_modules/iview/src/components/tooltip/tooltip";
import Btn from "../../../node_modules/iview/src/components/button/button";
import _ from "lodash";

export default {
  components: {
    ImageInput,
    Tooltip,
    Btn
  },
  data() {
    return {
      compress: false,
      logo: {
        type: "",
        data: ""
      },
      columnUsersShow: [
        { title: "用户类型", align: "left", key: "user_type_desc" },
        { title: "是否显示", type: "selection", width: 60, align: "center" }
      ],
      usersShowData: [
        {
          user_type_desc: "正式员工",
          user_type: "0",
          show: true
        }
      ],
      selection: [],
      userTypes: []
    };
  },
  created() {
    this.loadLogo();
    this.loadUsersShow();
  },
  methods: {
    loadLogo() {
      ME.get_logo().then(data => {
        this.logo = data.data;
        this.fillLogoData();
      });
    },
    loadUsersShow() {
      Promise.all([getTypeList("1"), ME.get_users_show()]).then(list => {
        let ut = list[0].data;
        let us = list[1].data;
        this.userTypes = ut;
        this.usersShowData = ut.map(it => {
          let checked = us[it.value];
          checked = !!checked;
          return {
            _checked: us[it.value],
            user_type: it.value,
            user_type_desc: it.label
          };
        });
      });
    },
    changedLogo() {
      let image = this.$refs["logoInput"].getImage();
      let format = this.$refs["logoInput"].getFormat();
      let type = "jpg";
      if (format.indexOf("png") >= 0) {
        type = "png";
      }
      this.logo = {
        data: image,
        type: type
      };
      //
    },
    fillLogoData() {
      //
      if (this.logo && this.logo.type && this.logo.data) {
        let format = "data:image/jpeg;base64";
        let image = this.logo.data;
        if (this.logo.type == "png") {
          format = "data:image/png;base64";
        }
        this.$refs["logoInput"].resetImage(format, image);
      }
    },
    handleSave() {
      if (this.logo && this.logo.type && this.logo.data) {
        ME.set_logo({
          type: this.logo.type,
          data: this.logo.data
        })
          .then(() => {
            this.$Message.success("配置logo成功");
          })
          .catch(() => {
            this.$Message.error("配置logo失败");
          });
      }
    },
    handleClean() {
      ME.set_logo({}).then(() => {
        this.logo = {
          data: "",
          type: ""
        };
        this.fillLogoData();
        this.$refs["logoInput"].resetImage();
      });
    },
    // handleSelectAll(select) {
    //   this.$refs.selection.selectAll(select);
    // },
    selectChange(selection) {
      console.log(selection);
      this.selection = selection;
    },
    handleRecertUsersShow() {
      this.loadUsersShow();
    },
    handleSaveUsersShow() {
      let data = {};
      this.userTypes.map(it => {
        data[it.value] = false;
      });
      this.selection.map(it => {
        data[it.user_type] = true;
      });

      ME.set_users_show(data)
        .then(() => {
          this.$Message.success("配置提示过滤成功");
        })
        .catch(error => {
          this.$Message.error("配置提示过滤失败");
        });
    }
  }
};
</script>